<template>
  <view
    class="navigation_bar"
    :class="{ backg: isBackg }"
    :style="'height:' + (system.statusBarHeight + 48) + 'px'"
  >
    <view :style="'height:' + system.statusBarHeight + 'px'"></view>
    <view class="navigation_container safe-left safe-right">
      <view class="navigation_content">
        <view class="navigation_content_view flex flex-middle flex-between">
          <view class="back-btn flex flex-middle flex-center">
            <u-icon
              size="16"
              color="#fff"
              name="arrow-left"
              @click="backClick"
            />
          </view>

          <view
            class="right-btn flex flex-middle flex-center"
            :class="{ light: isLight }"
            v-show="!load"
            @click="changeLight"
          >
            <u-icon
              class="icon"
              size="18"
              :color="isLight ? '#fff' : '#666'"
              :name="type == 'craftsman' ? 'heart' : 'star'"
            />
            {{ type == "craftsman" ? "关注" : "收藏" }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
  
<script>
import { mapGetters } from "vuex";

export default {
  props: {
    type: {
      type: String,
      default: "",
    },
    isLight: {
      type: Boolean,
      default: false,
    },
    load: {
      type: Boolean,
      default: false,
    },
    changeLight: {
      type: Function,
      default: () => {},
    },
    isBackg: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters(["system"]),
  },
  methods: {
    backClick() {
      this.$navigateBack();
    },
  },
};
</script>
  
<style scoped lang="scss">
.backg {
  background: #fff;
  border-bottom: 1px solid rgba(#000, 0.1);
}

.navigation_bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;

  .navigation_container {
    .navigation_content {
      padding: 0 12px;

      .navigation_content_view {
        height: 48px;

        .light {
          background: #31bc4e;
          border: 1px solid #31bc4e !important;
          color: #fff !important;
        }

        .right-btn {
          width: 64px;
          height: 26px;
          border-radius: 26px;
          border: 1px solid #cbcbcb;
          color: #666;

          .icon {
            margin-right: 2px;
          }
        }

        .back-btn {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
}
</style>
  